<template>
  <div class="login-box">
    <login></login>
    <div class="input-class">
      <div style="width: 100%;height: 10%;display: flex;justify-content: center">
      </div>
      <div class="input-box">
        <input type="text" placeholder="账号" v-model="user.username">
        <input type="password" placeholder="密码" v-model="user.password">
        <div style="display: flex;flex-flow: row;">
          <input type="text" placeholder="验证码" style="width: 60%;height: 90%" v-model="user.code">
          <img :src="imgUrl" style="height: 100%;width: 30%;margin:0 5%" alt="" @click="captchas">
        </div>
        <div style="display: flex;justify-content: center;align-items: center">
          <button @click="log" style="height: 100%;width: 100%;
                  display: flex;justify-content: center;
                  align-items: center;
                  border-radius: 25px;
                  background: #a6c1ee;
                  color: #fbf4ea;
                  border: none">
            登陆
          </button>
        </div>
      </div>
      <div style="width: 100%;height: 10%;display: flex;
      justify-content: center;
      justify-items: center;
      align-items: center">
        <routerLink :to="{ path: '/register' }">还没账号？<a style="color: white">不妨加入我们</a>
        </routerLink>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Login from './login.vue'
import {captcha, login} from "@/service/api";
import {onBeforeMount, ref} from "vue";
import {useRouter} from "vue-router";
import {useUserStore} from "@/stores";
import {ElMessage} from 'element-plus'


const userStore = useUserStore();
const {setToken} = userStore;

const router = useRouter()

const user = ref({
  username: "",
  password: "",
  code: "",
  key: ""
})
onBeforeMount(() => {
  captchas();
})
const imgUrl = ref("")

const log = () => {
  if (user.value.username === '') {
    ElMessage.error("账号不能为空")
    return
  }
  if (user.value.password === '') {
    ElMessage.error("密码不能为空")
    return
  }
  if (user.value.code === '') {
    ElMessage.error("验证码不能为空")
    return
  }
  console.log(user)
  login(user.value).then(res => {
    console.log("登陆验证", res)
    if (res.data.code === 200) {
      setToken(res.data.data)
      ElMessage.success("登陆成功")
      router.push({name: "home"})
    } else {
      ElMessage.error(res.data.msg)
    }
  }).catch(err => {
    console.log(err)
  })
  captchas();
}
//图片验证码
const captchas = () => {
  user.value.key = String(Math.random() * 100);
  captcha(user.value).then(res => {
    console.log(res.status)
    if (res.status === 200) {
      const blob = new Blob([res.data])
      imgUrl.value = window.URL.createObjectURL(blob);
    } else {
      ElMessage.error("服务器异常")
    }
  }).catch(err => {
    console.log(err)
  })
}
</script>
<style scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

.input-class {
  width: 25%;
  height: 60%;
  border: white 1px solid;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 25px;
}

.input-box {
  height: 60%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: space-between;
}

.input-box > * {
  margin: 5px 0;
  height: 15%;
  width: 80%;
}

input {
  outline: none;
  text-indent: 1rem;
  font-size: 1rem;
  background: transparent;
  color: white;
  border: none;
  border-bottom: 1px solid #77c2dc;
}

::-webkit-input-placeholder {
  color: white;
  opacity: 70%;
}

div > a {
  padding: 5px;
  text-decoration: none;
  color: black;
}
</style>